<template>
    <div class="j-select">
        <v-menu class="y-select">
            <template v-slot:activator="{ props }">
                <div v-bind="props">
                    <slot></slot>
                    <VIcon>mdi mdi-menu-down</VIcon>
                </div>
            </template>
            <v-list>
                <v-list-item v-for="(item, index) in selectDate.child" :key="index" :value="item.value">
                    <v-list-item-title class="m-item" @click="() => down(item)"> {{ item.label }} <img v-show="item === idx" class="icon" src="@/assets/dui.png" /> </v-list-item-title>
                </v-list-item>
            </v-list>
        </v-menu>
    </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
const prop = defineProps({
    selectDate: {
        type: Object,
        default: {
            title: "",
            child: []
        }
    },
    callfun: {
        type: Function,
        default: function () {
            console.log("j-select的回调");
        }
    }
});

const idx = ref(prop.selectDate.child[0]);

const down = function (item: any) {
    idx.value = item;
    prop.callfun(item, prop.selectDate);
};

onMounted(() => down(idx.value));
</script>

<style lang="less" scoped>
.j-select {
    user-select: none;
    background-color: transparent;
}

:deep(.v-list-item-title) {
    min-width: 30px;
    justify-content: space-between;
}

.icon {
    height: 15px;
    border-radius: 50%;
    background-color: var(--main);
}
.m-item {
    display: flex;
    align-items: center;
    justify-center: space-between;
    width: 150px;
}
</style>
